<template>
	<page :nav="false" ref="pageRef">
		<view class="pagae-nav" :style="{
                paddingTop: statusBarHeight + 'px',
                background: headerBg
            }">
			<view class="nav-title">
				<image class="nav-logo" v-show="scrollTop > 0" mode="widthFix" :src="ossurl.logoBlack" />
				<image class="nav-logo" v-show="scrollTop == 0" mode="widthFix" :src="ossurl.logoWhite" />
			</view>
		</view>

		<view class="operation">
			<view class="searchTab" :style="{
                    top: statusBarHeight + 40 + 'px'
                }">
				<view class="avatar">
					<image class="avatarImg" :src="user ? user.avatar : ossurl.common.noavatar" />
				</view>
				<view class="searchInput">
					<input type="text" confirm-type="search" placeholder="搜索你感兴趣的～" v-model.trim="searchForm.keyword"
						placeholder-style="color:#fff;font-size:12px;" @confirm="search()" />
					<text class="cuIcon-search" @click="search()"></text>
				</view>
				<view class="messageBtn" @click="showKefu">
					<image :src="ossurl.common.message" />
				</view>
			</view>
			<view class="moli-wrapper">
				<swiper v-if="bannerList" class="moli-swiper" :indicator-dots="false" circular="true" :autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<index-banner :data="item" @click="gotoRoute(item)"></index-banner>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="indexTab" v-if="showStore">
			<view
                class="tabItem"
                v-for="(item, index) of tabList"
                :key="index"
                @click="gotoRoute(item)"
            >
                <view class="itemBox">
                    <image class="index_tab_img" :src="item.cover" mode="widthFix" />
                    <view class="tabTitle">
                        {{ item.title }}
                        <view class="tip">{{ item.subtitle }}</view>
                    </view>
                </view>
            </view>
		</view>
		<view class="wrapper">
			<view class="ipList">
				<view class="ipItem" :class="{ active: searchForm.worksId == item.id }" v-for="item of ipList"
					@click="changeworksId(item)" :key="item.id">
					<image class="ipImg" :src="item.cover" mode="aspectFill" />
					<view class="ipTitle">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 7px 0" v-if="tableData" class="flex-wrap">
			<goods-cell v-for="(item, index) in tableData" :key="index" :data="item" @click="showDetail"></goods-cell>
		</view>
	</page>
</template>

<script>
	import goodsCell from '@/components/goods-cell'
	import ossurl from '@/utils/ossurl'
	import indexBanner from './components/indexBanner'
	export default {
		components: {
			goodsCell,
			indexBanner
		},
		data() {
			return {
				ossurl,
				luckGoodsList: [],
				tableData: [],
				requesing: false,
				requestTime: null,
				scrollTop: 0,
				ipList: [],
				searchForm: {
					worksId: '',
					current: 1,
					size: 15,
					keyword: ''
				},
				showStore:false
			}
		},
		computed: {
			user() {
				return this.$store.state.userInfo
			},
			headerBg() {
				return this.scrollTop > 0 ? '#fff' : 'transparent'
			},
			bottomHeight() {
				let systemInfo = this.$store.state.systemInfo
				if (!systemInfo) return 64 - 12
				let height = systemInfo.screenHeight - systemInfo.safeArea.bottom
				if (height > 10) {
					return 64 + 10 - 12
				}
				return 64 - 12
			},
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight
				}
				return 20
			},

			tabList() {
				return this.$store.state.pageConfig['index_icon'].components[0].elements
			},
			bannerList() {
				return this.$store.state.pageConfig['index_banner'].components[0].elements
			},
			hide() {
				return !this.$store.state.hide
			}
		},
		mounted() {
			// this.getData()
		},
		onShow() {
			this.getData()
			this.getParamConfig()
		},
		onShareAppMessage(res) {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力',
				path: '/pages/award/index'
			}
		},
		onShareTimeline() {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力'
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (this.scrollTop > 0) {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				})
			} else {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000'
				})
			}
		},
		onPullDownRefresh() {
			this.search()
		},
		onReachBottom() {
			let allData = this.tableData
			if (allData.length > 0 && allData.length % this.searchForm.size === 0) {
				this.searchForm.current += 1
				this.search(true)
			}
		},
		methods: {
			showKefu() {
				this.$common.showKefu()
			},
			async getParamConfig() {
				const weal_config = await this.$service.user.getParamConfig('invite_config')
				this.showStore = weal_config.state != 0
			},
			changeworksId(item) {
				this.searchForm.worksId = item.id
				this.search()
			},
			async getData() {
				this.search()
				const ipres = await this.$service.award.ipList()
				if (ipres) {
					this.ipList = [{
							name: '所有IP',
							id: '',
							cover: ossurl.home.allIp
						},
						...ipres
					]
				}
			},
			async search(append) {
				if (!append) {
					this.searchForm.current = 1
				}
				if (this.requesing) return
				this.requesing = true
				const res = await this.$service.mall.list({
						...this.searchForm,
						categoryId: '',
						sellType: ''
					},
					true
				)
				if (append) {
					this.tableData = [...this.tableData, ...res]
				} else {
					this.tableData = res
				}

				uni.stopPullDownRefresh()
				this.requesing = false
			},
			showDetail(item) {
        uni.navigateTo({
            url: '/subPackages/pages/product/index?id=' + item.id
          });

			},
			gotoRoute(item) {
				this.$common.showNext(item)
			},
			showLuckGoods(item) {
				// this.$router.switchTab('award')
				this.$router.push('award_detail', {
					poolId: item.id
				})
				return
			},
			bannerChange(e) {
				let index = e.detail.current
			},
			test() {
				this.$message.showLoading()
			},
			getImg(index) {
				return this.ossurl['index_tab' + (index + 1)]
			}
		}
	}
</script>
<style lang="scss">
	.middle-banner-group {
		position: absolute;
		left: 0;

		bottom: 0;
		right: 0;
		opacity: 0;

		view {
			height: 240rpx !important;
		}
	}
</style>
<style lang="scss" scoped>
	.bg {
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.scroll-wrapper {
		height: calc(100% - 64px);
	}

	.pagae-nav {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		transition: 0.2s;

		.back {
			position: absolute;
			left: 28rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.banner-bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 440rpx;
	}

	.nav-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;

		.nav-logo {
			width: 180rpx;
		}
	}

	.screen-swiper {
		height: 680rpx;
	}

	.operation {
		position: relative;
	}

	.middle-banner {
		height: 240rpx;
		width: 100%;
		border-radius: 16rpx;
	}

	.item {
		padding: 16rpx 20rpx 20rpx;
	}

	.tag {
		height: 26rpx;
		line-height: 26rpx;
		padding: 0 10rpx;
		background: #e7d5ff;
		border-radius: 13rpx;
		font-size: 20rpx;
	}

	.moli-swiper {
		height: calc(100vh - 180rpx);
	}

	.moli-wrapper {
		flex: 1;
		overflow: hidden;
	}

	.index_logan_img {
		width: 100%;
	}

	.indexTab {
		margin-top: -160rpx;
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		z-index: 90;
	}

	.tabItem {
		min-width: 50%;

		padding: 10rpx;
	}

	.itemBox {
		padding: 28rpx 32rpx;
		background-color: #fff;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: 700;
		color: #000000;

		.tip {
			font-size: 24rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 300;
			color: #666666;
			line-height: 44rpx;
		}
	}

	.index_tab_img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.ipList {
		overflow-x: auto;
		word-break: keep-all;
		white-space: nowrap;
		padding: 28rpx 20rpx;
		background: #ffffff;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		position: relative;
		z-index: 1;

		.ipItem {
			display: inline-block;
			margin-right: 28rpx;

			.ipImg {
				width: 96rpx;
				height: 138rpx;
				border-radius: 12rpx;
				width: border-box;
				border: 0rpx solid #f0cd49;
				transition: 0.1s;
			}

			.ipTitle {
				font-size: 24rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.85);
				margin-top: 14rpx;
				transition: 0.1s;
				text-align: center;
			}

			&.active {
				.ipImg {
					border: 6rpx solid #f0cd49;
				}

				.ipTitle {
					color: #f0cd49;
				}
			}
		}
	}

	.searchTab {
		display: flex;
		padding: 16rpx 22rpx;
		position: absolute;
		z-index: 90;
		width: 100%;

		.avatar {
			.avatarImg {
				width: 64rpx;
				height: 64rpx;
				border: 2rpx solid #e47813;
				border-radius: 50%;
			}
		}

		.searchInput {
			height: 64rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 640rpx 640rpx 640rpx 640rpx;
			color: #fff;
			display: flex;
			flex: 1;
			align-items: center;
			padding: 0 24rpx;
			margin: 0 30rpx;

			input {
				flex: 1;
			}
		}

		.messageBtn {
			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>